<template>
  <div class="home">
    <img class="home-background" :src="this.defaultConfig.homebackground" />
    <div class="home-center home-map" id="home-map">
      <div style="position: relative">
        <div class="home-chinaMap" v-if="ipSource === 'domestic'">
          <img class="home-chinaMap-img" :src="this.defaultConfig.homeHMap" />
          <img
            class="home-chinaMap-down"
            v-if="showLeft"
            :src="this.defaultConfig.homeHDown"
          />
          <img
            class="home-chinaMap-right"
            v-if="showRight"
            :src="this.defaultConfig.homeHRight"
          />
        </div>
        <div class="home-chinaMap" v-if="ipSource !== 'domestic'">
          <img class="home-chinaMap-img" :src="this.defaultConfig.homeOMap" />
          <img
            class="home-chinaMap-center"
            v-if="showLeft"
            :src="this.defaultConfig.homeOCenter"
          />
          <img
            class="home-chinaMap-right"
            v-if="showRight"
            :src="this.defaultConfig.homeORight"
          />
        </div>
        <img class="home-lat-img" :src="this.defaultConfig.homeLat" />
      </div>
    </div>
    <div class="home-center home-txtSecret">
      <img class="home-txtSecret-img" :src="this.defaultConfig.homeTxtSecret" />
    </div>
    <div class="home-center home-deepTip">
      <img class="home-deepTip-img" :src="this.defaultConfig.homeDeepTip" />
    </div>
    <div class="home-center home-submarine">
      <img class="home-submarine-img" :src="this.defaultConfig.submarine" />
    </div>
    <div
      class="home-center home-bottom-btn-div home-bottom-text"
      v-if="distanceShow"
    >
      <span v-if="distance">
        我和马沟的距离
        <span class="home-distance-text">{{ distance }}</span>
        KM
      </span>
      <br />
      <span>正在前往中...</span>
    </div>
    <div class="home-center home-bottom-btn-div" v-else>
      <img
        class="home-bottom-btn"
        @click="homeBtnDownClick"
        :src="this.defaultConfig.homebtnStart"
      />
    </div>
  </div>
</template>

<script>
import { EventBus } from "../../utils/EventBus.js";

export default {
  name: "Home",
  data() {
    return {
      distance: "",
      distanceShow: false,
      finishShow: false,
      ipSource: "domestic",
      mariana: {
        lat: 19.573847,
        lon: 140.643201,
      },
      showLeft: false,
      showRight: false,
    };
  },
  methods: {
    async homeBtnDownClick() {
      //location.href = "#/game";
      this.distanceShow = true;
      this.showAnimation();
      // var User = window["cctvh5-account"].default;
      // User.signin();
      // let isSigned = await User.isSigned();
      // if (isSigned) {
      //   this.distanceShow = true;
      //   this.showAnimation();
      //   User.info().then(function (uinfo) {
      //     uinfo = JSON.stringify(uinfo);
      //     uinfo = JSON.parse(uinfo);
      //     let head = document.getElementById("share-info-head-user");
      //     head.setAttribute("crossOrigin", "Anonymous");
      //     that.headImgUrl = uinfo.headImgUrl;
      //     that.nickname = uinfo.nickname;
      //     head.onload = function () {
      //       that.isLoadedHead = true;
      //     };
      //   });
      // }
    },
    showAnimation() {
      let that = this;
      this.showLeft = true;
      let ratio = document.documentElement.clientWidth / 375;
      setTimeout(() => {
        if (that.ipSource === "domestic") {
          that.homeAnimation(ratio);
        } else {
          that.outsideAnimation(ratio);
        }
      }, 300);
    },
    async homeAnimation(ratio) {
      let that = this;
      let plane = document.createElement("img");
      plane.id = "plane";
      plane.src = that.defaultConfig.homePlane;
      plane.style.width = "1.75rem";
      plane.style.position = "absolute";
      plane.style.left = 94 * ratio + "px";
      plane.style.top = 64 * ratio + "px";
      plane.style.transform = "rotate(30deg)";
      document.body.appendChild(plane);
      that.tweenMove("plane", 20 * ratio, 36 * ratio, 1000, function () {
        that.showRight = true;
        setTimeout(() => {
          document.body.removeChild(plane);
          let ship = document.createElement("img");
          ship.id = "ship";
          ship.src = that.defaultConfig.homeShip;
          ship.style.width = "1.5rem";
          ship.style.position = "absolute";
          ship.style.left = 94 * ratio + "px";
          ship.style.top = 105 * ratio + "px";
          document.body.appendChild(ship);
          that.tweenMove("ship", 100 * ratio, -12 * ratio, 3000, function () {
            document.body.removeChild(ship);
            that.$root.$children[0].$data.change.playChange();
            setTimeout(() => {
              document.getElementById("home-map").remove();
              location.href = "#/game";
            }, 300);
          });
        }, 300);
      });
    },
    async outsideAnimation(ratio) {
      let that = this;
      setTimeout(() => {
        let ship = document.createElement("img");
        ship.id = "ship";
        ship.src = that.defaultConfig.homeShip;
        ship.style.width = "1.5rem";
        ship.style.position = "absolute";
        ship.style.left = 94 * ratio + "px";
        ship.style.top = 105 * ratio + "px";
        document.body.appendChild(ship);
        that.tweenMove("ship", 100 * ratio, -12 * ratio, 3000, function () {
          document.body.removeChild(ship);
          setTimeout(() => {
            document.getElementById("home-map").remove();
            location.href = "#/game";
          }, 300);
        });
      }, 300);
    },
    async getDistanceCalc() {
      await this.distanceCalc(this.mariana, (res) => {
        this.distance = res;
        localStorage.setItem("YspDistance", res);
      });
    },
  },
  async created() {
    //alert(returnCitySN["cip"]+','+returnCitySN["cname"])
    if (returnCitySN["cname"] === "国内未能识别的地区") {
      this.ipSource = "foreign";
      localStorage.setItem("YspIpSourceForeign", "foreign");
    }
  },
  async mounted() {
    this.getDistanceCalc();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home-background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -100;
}
.home-bubble {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -99;
}
.home-center {
  position: fixed;
  width: 100%;
  margin: 0 auto;
}
.home-map {
  top: 30px;
  margin-left: -50px;
}
.home-chinaMap-img {
  width: 206px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}
.home-chinaMap-down {
  width: 5px;
  position: absolute;
  left: 152px;
  top: 56px;
}
.home-chinaMap-right {
  width: 67.5px;
  position: absolute;
  left: 162px;
  top: 76px;
}
.home-chinaMap-center {
  width: 174px;
  position: absolute;
  left: 102px;
  top: 15px;
}
.home-lat-img {
  width: 100px;
  position: absolute;
  left: 263px;
  top: 60px;
}
.home-people-img {
  width: 100px;
}
.home-txtSecret {
  top: 205px;
}
.home-deepTip {
  bottom: 195px;
}
.home-submarine {
  bottom: 100px;
}
.home-deepTip-img {
  margin-left: 120px;
  width: 160px;
}
.home-txtSecret-img {
  width: 300px;
}
.home-submarine-img {
  width: 200px;
}
.home-bottom-btn-div {
  bottom: 5px;
}
.home-bottom-btn {
  display: inline-block;
  width: 260px;
  height: 90px;
}
.home-bottom-text {
  color: rgba(189, 189, 187);
  font-size: 18px;
  font-weight: bold;
}
.home-distance-text {
  color: orange;
}
</style>
